<template>
    <div>
        <div class="poa watch_big">
            <video_list @click="big_video_open(index)" :index="index" :item="item" v-for="item, index in list"
                :key="index" />
            <no_more v-if="list.length" />
        </div>
        <Transition name="video">
            <div class="poa" v-show="big_video_flag">
                <div @click="big_video_off" class="video_big_back">
                    <icon_back />
                </div>
                <big_video :video_item_comments_flag="true" :index="big_video_index" :list="list" />
            </div>
        </Transition>
        <loading v-if="!list.length" />
    </div>
</template>
<script setup>
import { defineAsyncComponent, reactive, ref } from 'vue';
import { follow_video } from '../api/api';
const video_list = defineAsyncComponent(() => import('../components/common/watch_video.vue'))
const no_more = defineAsyncComponent(() => import('../components/common/no_more.vue'))
const icon_back = defineAsyncComponent(() => import('../components/common/icon_back.vue'))
const big_video = defineAsyncComponent(() => import('../components/common/video_list.vue'))
const loading = defineAsyncComponent(() => import('../components/common/lazy_loading.vue'))
let list = ref([])
let big_video_index = ref(0)
let big_video_flag = ref(false)
function big_video_open(index) {
    big_video_index.value = index
    big_video_flag.value = true
    document.querySelector('.bottom_router').style = 'display:none;'
}
function big_video_off() {
    big_video_flag.value = false
    document.querySelector('.bottom_router').style = ''
}
follow_video(`api/user/${JSON.parse(localStorage.getItem('user')).userId}/FollowerVideo/page/1`).then(res => {
    if (res.data.code == 200) {
        list.value = res.data.data
    }
})

</script>
<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 / 10rem)
}

.watch_big {
    background-color: #000000;
    color: #fff;
    overflow-y: scroll;
    padding-bottom: r(58);
}

.video-enter-active {
    animation: shadow 0.5s ease;
}

.video-leave-active {
    animation: shadow 0.5s ease reverse;
}

.video_big_back {
    position: absolute;
    left: r(15);
    top: r(15);
    width: r(15);
    height: r(15);
    z-index: 16;
}

@keyframes shadow {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0%);
        opacity: 1;
    }
}
</style>